<style>

    .g-container {
        padding: 10px;
        background: #fff;
        box-sizing: border-box;
		position: relative;
		z-index: 999;
    }
    .g-container2 {
        display: flex; 
        justify-content: space-between;
        align-items: center;
    }
    .g-input {
		background: #ffffff;
		border-bottom: 1px solid #f5f5f5;
		position: relative;
		z-index: 999;
		display: flex;
		align-items: center;
		padding: 10px;
		box-sizing: border-box;
    }
    .g-input text { width: 140upx}
    .g-input input {flex: 1; height: 36upx;}
    .f-border1px {border-bottom: 1px solid #f5f5f5;}

    .textarea {
        width: 100%;
        height: 200upx;
        margin-bottom: 10px;
    }
	.u-confirm {
	    width: 90%;
	    margin: 60upx 0 0 5%;
	    border-radius: 100px;
	    background: #d71311;
	    color: #fff;
	    text-align: center;
	    padding: 30upx;
	    font-size: 38upx;
	}
</style>
<template>
    <view class="page">
        <view class="g-input">
            <text>联系人</text>
            <input type="text" v-model="data.realname" placeholder="请输入联系人姓名">
        </view>
        <view class="g-input">
            <text>联系电话</text>
            <input type="number" v-model="data.mobile" placeholder="请输入联系电话">
        </view>
        <view class="g-container2 g-container f-border1px" @tap="showMulLinkageThreePicker">
            <text>所在地区</text>
            <view class="g-container2">
                <text>{{pickerText}}</text>
                <view>
                    <arrow color="#ccc" size="40" direction="right"></arrow>
                </view>
            </view>

        </view>
        <textarea class="textarea g-container" v-model="data.address" placeholder="请输入详细的收货地址"></textarea>
        <label class="g-container g-container2">
            <text>设为默认</text>
            <switch @change="toggleDefault" :checked="data.is_default" color="#D71611" />
        </label>
        <!-- 地址框 -->
        <mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" @onConfirm="onConfirm"></mpvue-city-picker>
		<button type="warn" class="u-confirm" @tap="tjConfirm">提交</button>
        <view class="m-loading" v-if="isShowLoading">
            <image src="../../../../static/images/loading.gif" mode="widthFix"></image>
            <text>加载中</text>
        </view>
    </view>
</template>

<script>
    import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
    import area from '@/components/mpvue-citypicker/city-data/area.js';
    import city from '@/components/mpvue-citypicker/city-data/city.js';
    import province from '@/components/mpvue-citypicker/city-data/province.js';
	import henglang from '@/common/common.js';
    
    export default {
        components: {
            mpvueCityPicker
        },
        data() {
            return {
                pickerText: '点击选择',
                themeColor: '#007AFF',
                isShowLoading: false,
                data: {
                    realname: '',
                    mobile: '',
                    province: '',
                    city: '',
                    zone: '',
                    address: '',
                    is_default: 0,
                }
            };
        },
        methods: {
            // 三级联动选择
            showMulLinkageThreePicker() {
                this.$refs.mpvueCityPicker.show();
				uni.hideKeyboard()
            },
            onConfirm(e) {
                let val = e.value;
                this.pickerText = e.label.replace(/-/g, ' ');
                this.data.province = province[val[0]].value;
                this.data.city = city[val[0]][val[1]].value;
                this.data.zone = area[val[0]][val[1]][val[2]].value;
            },
            toggleDefault(e) {
                this.data.is_default = e.target.value ? 1 : 0;
            },
			tjConfirm(){
				let that = this
				if (!this.data.realname) {
				    henglang.showToast('请输入正确的姓名');
				    return;
				}
				if (!henglang.checkPhone(this.data.mobile)) {
				    henglang.showToast('请输入正确的手机号码');
				    return;
				}
				if (this.pickerText == "点击选择") {
				    henglang.showToast('请选择正确的地址');
				    return;
				}
				if (!this.data.address) {
				    henglang.showToast('请选择输入的详细地址');
				    return;
				}
				this.isShowLoading = true;
				henglang.post('member/addressModify',that.data,true,function(res){
					if(res.data.code == 0 ){
						henglang.showToast(res.data.msg,500);
						that.isShowLoading = false;
						setTimeout(()=>{uni.navigateBack();},500); 
					}else{
						henglang.showToast(res.data.msg);
					}
				});
			}
        }
    }
</script>
